<template>
    <div class="addGateway">
        <div class="banner" v-if="step == 1 || step == 2">
            <div class="flexItem">
                <span v-if="step == 1">网关上电，短按网关按钮，等待指示灯快闪</span>
                <span v-if="step == 2">连接aptenon开头的WIFI热点，WIFI密码为空</span>
                <span v-if="step == 4">请在门锁上按配网键绑定</span>
            </div>
        </div>
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flex">
                <div class="flexItem" v-if="step == 1" @click="onStep1Click()">{{item.name}}</div>
                <div class="flexItem" v-if="step == 2" @click="onGeneralClick('/addGatewayStep3',null)">{{item.name}}</div>
                <div class="flexItem" v-if="step == 4" @click="onGeneralClick('/addGatewaySuccess',null)">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'AddGatewayStep1',
        components: {},
        data () {
            return {
                step: this.$route.query.step,
                items: [{name: '下一步'}],
            }
        },
        created () {
        },
        methods: {
            onStep1Click: function (link, queryParams) {
                this.step=2
            },
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            }
        }
    }
</script>

<style scoped>
    .addGateway > .banner {
        width: 100vw;
        min-height: 50vh;
        background: url(../../assets/addGateway_01.png) no-repeat center top;
        background-size: 100% 100%;
        display: flex;
        justify-content: start;
    }

    .addGateway > .banner > .flexItem {
        align-self: flex-end;
        margin: 3.4vh;
    }

    .addGateway > .buttonList > .flex {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;

    }

    .addGateway > .buttonList > .flex > .flexItem {
        width: 50vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }
</style>
